import { Routes, Route } from "react-router-dom";
import Home from "@/pages/Home";
import EncoderDecoder from "@/pages/EncoderDecoder";
import { Navigation } from "@/components/Navigation";
import { useState } from "react";
import { AuthContext } from '@/contexts/authContext';
import { ThemeProvider } from '@/contexts/themeContext';
import { useTheme } from '@/hooks/useTheme';
import { motion } from 'framer-motion';

// 页面容器组件
const PageContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { isDark } = useTheme();
  
  return (
    <div className="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
      <Navigation />
      <main className="flex-1 max-w-5xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {children}
      </main>
      <footer className={`py-6 px-4 border-t ${isDark ? 'bg-gray-800 text-gray-400 border-gray-700' : 'bg-white text-gray-600 border-gray-200'} transition-colors duration-300`}>
        <div className="max-w-5xl mx-auto text-center text-sm">
          <p>极简工具集 &copy; {new Date().getFullYear()}</p>
          <p className="mt-2">保护您的隐私，所有操作均在本地完成</p>
        </div>
      </footer>
    </div>
  );
};

// 带动画的页面组件
const AnimatedPage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  );
};

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <ThemeProvider>
      <AuthContext.Provider
        value={{ isAuthenticated, setIsAuthenticated, logout }}
      >
        <Routes>
          <Route 
            path="/" 
            element={
              <PageContainer>
                <AnimatedPage>
                  <Home />
                </AnimatedPage>
              </PageContainer>
            } 
          />
          <Route 
            path="/encoder-decoder" 
            element={
              <PageContainer>
                <AnimatedPage>
                  <EncoderDecoder />
                </AnimatedPage>
              </PageContainer>
            } 
          />
          <Route 
            path="/other" 
            element={
              <PageContainer>
                <AnimatedPage>
                  <div className="text-center text-xl text-gray-600 dark:text-gray-300 py-16">
                    Other Page - Coming Soon
                  </div>
                </AnimatedPage>
              </PageContainer>
            } 
          />
        </Routes>
      </AuthContext.Provider>
    </ThemeProvider>
  );
}
